<template>
  <div class="content-block">
    <div class="content-main">
      <div class="content-title">
        <div class="title-text-dot">菜单列表</div>
        <div class="title-handle">
          <el-button type="primary" size="mini" @click="handleAdd()">新 增</el-button>
        </div>
      </div>
      <el-table
        class="table-line"
        :data="allMenuDataList"
        style="width: 100%;"
        row-key="menuId"
        border
        size="mini"
        default-expand-all
        height="calc(100vh - 175px)"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-tag :type="dealType(scope.row.type)">{{scope.row.type | typeFilter}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              title="新增下级"
              class="text-blue"
              @click="handleAdd(scope.row)"
            >新增</el-button>
            <el-button
              size="mini"
              type="text"
              title="编辑"
              class="text-blue"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              title="删除"
              class="text-red"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作弹框 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="handleTitle"
        :visible.sync="handleVisible"
        width="470px"
        center
      >
        <el-form
          ref="sysMenuForm"
          :model="sysMenuForm"
          :rules="rulesSysMenuForm"
          status-icon
          label-width="90px"
          size="small"
        >
          <el-form-item label="上级菜单" v-if="sysMenuForm.parentId !== '0'">
            <el-row>
              <el-col :span="24">
                <el-input v-model="parentName" type="text" disabled></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="菜单类型" prop="type">
            <el-row>
              <el-col :span="24">
                <el-radio-group v-model="sysMenuForm.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <!-- <el-radio :label="2">按钮</el-radio> -->
                </el-radio-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-row>
              <el-col :span="24">
                <el-input v-model="sysMenuForm.name" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-row>
              <el-col :span="24">
                <el-input v-model="sysMenuForm.url" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="权限">
            <el-row>
              <el-col :span="24">
                <el-input v-model="sysMenuForm.perms" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="排序码" prop="orderNum">
            <el-row>
              <el-col :span="24">
                <el-input v-model.number="sysMenuForm.orderNum" type="number"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="图标">
            <el-row :gutter="5">
              <el-col :span="18">
                <el-input v-model="sysMenuForm.icon" type="text" placeholder="例如：fa fa-circle-o"></el-input>
              </el-col>
              <el-col :span="2">
                <el-button size="mini" type="warning" @click="handleIconSelect">选择图标</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="handleConfirm">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 删除弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        title="删除菜单"
        :visible.sync="delVisible"
        width="260px"
        center
      >
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="delVisible = false">取 消</el-button>
          <el-button size="mini" type="danger" @click="deleteRow">确 定</el-button>
        </span>
      </el-dialog>
      <icon-select :visible.sync="iconVisible" @selectIcon="selectIcon"></icon-select>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    const vm = this;
    let checkSortCode = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("排序码不为空"));
      } else if (!vm.regExNumber(value)) {
        return callback(new Error("请输入非负整数"));
      } else {
        callback();
      }
    };
    return {
      iconVisible: false,
      tableLoading: false,
      delVisible: false,
      handleTitle: "",
      handleVisible: false,
      parentName: "",
      sysMenuForm: {
        parentId: "",
        menuId: "",
        perms: "",
        name: "",
        url: "",
        type: "",
        orderNum: "",
        icon: ""
      },
      rulesSysMenuForm: {
        name: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur"
          }
        ],
        orderNum: [
          {
            required: true,
            validator: checkSortCode,
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择菜单类型",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      allMenuDataList: state => state.menuManage.allMenuDataList
    })
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions("menuManage", [
      "getAllMenuList",
      "addSysMenu",
      "editSysMenu",
      "removeMenu",
      "sysMenuById",
      "getPerById",
      "addSysPermission",
      "editSysPermission"
    ]),
    dealType(val) {
      let res = "";
      switch (parseInt(val)) {
        case 0:
          res = "primary";
          break;
        case 1:
          res = "success";
          break;
        case 2:
          res = "warning";
          break;
      }
      return res;
    },
    getData() {
      const vm = this;
      vm.getAllMenuList(vm);
    },
    resetForm() {
      const vm = this;
      vm.sysMenuForm = {
        parentId: "",
        perms: "",
        menuId: "",
        name: "",
        url: "",
        type: "",
        orderNum: "",
        icon: ""
      };
      vm.$nextTick(() => {
        vm.$refs.sysMenuForm.clearValidate();
      });
    },
    handleAdd(row) {
      const vm = this;
      vm.handleTitle = "新增菜单";
      vm.resetForm();
      if (row) {
        vm.parentName = row.name;
        vm.sysMenuForm.parentId = row.menuId;
      } else {
        vm.sysMenuForm.parentId = "0";
        vm.parentName = "根目录";
      }
      vm.handleVisible = true;
    },
    handleEdit(row) {
      const vm = this;
      vm.handleTitle = "编辑菜单";
      vm.handleVisible = true;
      vm.sysMenuForm = {
        menuId: row.menuId,
        parentId: row.parentId,
        name: row.name,
        url: row.url,
        perms: row.perms,
        type: parseInt(row.type),
        orderNum: row.orderNum,
        icon: row.icon
      };
      vm.parentName = row.parentName;
    },
    handleDelete(row) {
      this.delVisible = true;
      this.sysMenuForm.menuId = row.menuId;
    },
    handleIconSelect() {
      this.iconVisible = true;
    },
    selectIcon(val) {
      this.sysMenuForm.icon = val;
    },
    handleConfirm() {
      const vm = this;
      vm.$refs["sysMenuForm"].validate(valid => {
        if (valid) {
          if (vm.handleTitle === "新增菜单") {
            vm.addSysMenu(vm);
          }
          if (vm.handleTitle === "编辑菜单") {
            vm.editSysMenu(vm);
          }
        } else {
          return false;
        }
      });
    },
    deleteRow() {
      this.removeMenu(this);
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
</style>
